<template>
	<view>
		<view
			:class="{actionBtn: true, actionBtn0: position == 0, actionBtn1: position == 1, actionBtn2: position == 2, actionBtn3: position == 3 }"
			v-if="judgeGopayOrQianyue()" @click.stop="clickHandler">{{suipxTit}}</view>
		<!-- 选择支付方式的时候的弹出框 -->
		<view class="mengceng" v-if="mengcengShow" @click.stop="tab_mengceng" @touchmove.stop.prevent="moveHandle">
		</view>
		<view class="tankuang" v-if="tankuangShow" @touchmove.stop.prevent="moveHandle" @click.stop="stoppp">
			<view class="title">选择支付方式</view>
			<!-- 支付宝支付 -->
			<view v-if="zfbHasPayment">
				<view v-if="!zhifubaoCheckedState">
					<image @click="tab_zhifubao" style="width: 100%; height: 140rpx"
						src="@/static/shouye-add-rich/zhifubao1-rich.png" mode="aspectFit"></image>
				</view>
				<view v-if="zhifubaoCheckedState">
					<image @click="tab_zhifubao" style="width: 100%; height: 140rpx"
						src="@/static/shouye-add-rich/zhifubao-rich.png" mode="aspectFit"></image>
				</view>
			</view>
			<!-- 微信支付 -->
			<view v-if="wxHasPayment">
				<view v-if="!weixinCheckedState">
					<image @click="tab_weixin" style="width: 100%; height: 140rpx"
						src="@/static/shouye-add-rich/weixin1-rich.png" mode="aspectFit"></image>
				</view>
				<view v-if="weixinCheckedState">
					<image @click="tab_weixin" style="width: 100%; height: 140rpx"
						src="@/static/shouye-add-rich/weixin-rich.png" mode="aspectFit"></image>
				</view>
			</view>
			<view class="btn_bottom" @click="btn_comfirm()">确定</view>

		</view>
	</view>

</template>

<script>
	// 账单按钮组件
	import {
		checkPosition,
		getOrderId
	} from "../utils/checkShowBtn"
	import {
		billDetailGlobalKey
	} from "../../../../utils/constant"
	import {
		saveUserId,
		getUserId
	} from '@/utils';

	export default {
		name: "zhangdan",

		props: {
			order: {
				type: Object,
				default: {},
			}, // 订单对象
			isUsedInList: {
				type: Boolean,
				default: true,
			}, // 是否使用在订单列表页面
			product: {
				type: Object,
				default: null,
			}, // 商品对象
		},

		data() {
			return {
				isPaySuipxSta: true, //默认碎屏险已经支付
				suipxTit: '付碎屏险',
				oneClickPayList: [],
				totalAmount: 0,
				periodList: [],
				mengcengShow: false,
				tankuangShow: false,
				zhifubaoCheckedState: false,
				weixinCheckedState: false,
				zfbHasPayment: true,
				wxHasPayment: true,
			}
		},

		computed: {
			position: function() {
				return checkPosition.zhangdan(this.order, this.isUsedInList)
			},
			btnTxt: function() {
				if (this.order.payments) {
					return '付首付';
				} else {
					return '账单';
				}
			}
		},
		mounted() {
			this.getPaymentList()
			this.fetchPeriodList()
			// console.log('账单的order',this.order.payments);
		},

		methods: {
			stoppp() {},
			//点击蒙层关闭弹窗
			tab_mengceng() {
				this.mengcengShow = false;
				this.tankuangShow = false;
			},
			moveHandle() {},
			tab_zhifubao() {
				this.zhifubaoCheckedState = !this.zhifubaoCheckedState;
				this.weixinCheckedState = false;
			},
			tab_weixin() {
				this.weixinCheckedState = !this.weixinCheckedState;
				this.zhifubaoCheckedState = false;
			},
			judgeGopayOrQianyue() {
				//付完首付才出现，
				//payments:true 带有有要支付的期数（首付）。不显示签约，显示账单
				if (this.order.faceAuthStatus == '03') {
					//此时认证已完成,才能展示账单的东西
					if (!this.order.payments) {
						return true
					} else {
						return false
					}
				} else {
					return false
				}
			},
			/**
			 * 按钮的点击处理方法
			 */
			clickHandler() {
				uni.showLoading({
					title: '加载中...'
				});
				this.oneClickPayList = []
				this.$request(`order/mall/api/orderByStages/queryOrderByStagesByOrderId?orderId=${this.order.orderId}`, {},
						'get', true, true)
					.then((res) => {
						uni.hideLoading();
						this.oneClickPayList = res.data || []
						this.totalAmount = 0
						this.periodList = []
						if (this.oneClickPayList && this.oneClickPayList.length > 0) {
							this.oneClickPayList.some(item => {
								if (item.currentPeriods == 0 && item.status != 2 && item.status != 3) {
									//碎屏险还没有支付
									this.totalAmount = item.currentPeriodsRent
									this.periodList.push(item.currentPeriods)
									this.isPaySuipxSta = false
									this.suipxTit = '付碎屏险'

									this.mengcengShow = true;
									this.tankuangShow = true;
									return true
								}
								if (item.currentPeriods == 0 && (item.status == 2 || item.status == 3)) {
									//碎屏险已经支付
									this.isPaySuipxSta = true
									this.suipxTit = '碎屏险已付'

									uni.showToast({
										title: '当前订单碎屏险已支付！',
										icon: 'none',
										duration: 3000
									});
									return true
								}
							})
						}
					})
			},
			getPaymentList() {
				this.$request('order/mall/components/getPayChannelList', {
					orderId: this.queryOrderId,
				}, 'get', false).then((res) => {
					if (res.data && res.data.length > 0) {
						this.zfbHasPayment = res.data.some(item => item.type == 'zfb')
						this.wxHasPayment = res.data.some(item => item.type == 'wx')
					}
				});
			},
			fetchPeriodList() {
				this.oneClickPayList = []
				this.$request(`order/mall/api/orderByStages/queryOrderByStagesByOrderId?orderId=${this.order.orderId}`, {},
						'get', true, true)
					.then((res) => {
						this.oneClickPayList = res.data || []
						this.totalAmount = 0
						this.periodList = []
						console.log('首付一键支付的所有账单信息', this.oneClickPayList);
						if (this.oneClickPayList && this.oneClickPayList.length > 0) {
							this.oneClickPayList.some(item => {
								if (item.currentPeriods == 0 && item.status != 2 && item.status != 3) {
									//碎屏险还没有支付
									this.totalAmount = item.currentPeriodsRent
									this.periodList.push(item.currentPeriods)
									this.isPaySuipxSta = false
									this.suipxTit = '付碎屏险'
									return true
								}
								if (item.currentPeriods == 0 && (item.status == 2 || item.status == 3)) {
									//碎屏险已经支付
									this.isPaySuipxSta = true
									this.suipxTit = '碎屏险已付'
									return true
								}
							})
						}
						console.log('要一键支付的总钱', this.totalAmount.toFixed(2));
						console.log('要一键支付所有期数', this.periodList);
					})
			},
			//选好支付宝支付或者微信支付后点击确定按钮
			btn_comfirm() {
				if (!this.zhifubaoCheckedState && !this.weixinCheckedState) {
					uni.showToast({
						icon: 'none',
						title: '请选择支付方式!'
					});
					return;
				}
				if (this.zhifubaoCheckedState || this.weixinCheckedState) {
					//走支付宝接口 或者 微信支付接口
					this.mengcengShow = false;
					this.tankuangShow = false;
					this.goTopay()
				}
			},
			goTopay() {
				let postData = {
					orderId: this.order.orderId,
					totalAmount: this.totalAmount.toFixed(2),
					periodList: this.periodList,
				}
				console.log('一键支付首付的参数', postData);
				if (this.zhifubaoCheckedState) {
					this.$request('/order/mall/api/orderByStages/alipayTradeWapPay', postData, 'post')
						.then((res) => {
							if (res.data != null && res.data.payUrl != null) {
								//从服务器获取的订单
								let orderInfo = res.data.payUrl;
								window.location.href = orderInfo;
							}
						})
						.catch((e) => {
							console.log('支付错误', e);
						})
						.finally(() => {
							getHideLoading();
							console.log('支付结束');
						});
				} else {
					this.$request('/order/mall/api/orderByStages/wxPayH5', postData, 'post')
						.then((res) => {
							if (res.data) {
								window.location.href = res.data.h5_url;
							}
						})
						.catch((e) => {
							console.log('支付错误', e);
						})
						.finally(() => {
							getHideLoading();
							console.log('支付结束');
						});
				}
			},
		}
	}
</script>

<style lang="less" scoped>
	.mengceng {
		position: fixed;
		left: 0;
		bottom: 0;
		width: 100%;
		height: 100vh;
		z-index: 20;
		opacity: 0.5;
		background-color: #999999;
	}

	.tankuang {
		position: fixed;
		left: 0;
		bottom: 0;
		z-index: 21;
		width: 100%;
		background-color: white;
		padding: 20rpx;
		border-top-left-radius: 30rpx;
		border-top-right-radius: 30rpx;




	}

	.title {
		font-size: 34rpx;
		margin-top: 10rpx;
		font-weight: bold;
		height: 60rpx;
		line-height: 60rpx;
		padding-left: 30rpx;
	}

	.btn_bottom {
		background-color: #1677ff;
		text-align: center;
		font-size: 34rpx;
		font-weight: 600;
		color: #ffffff;
		border: beige;
		letter-spacing: 0.05em;
		margin: 40rpx 0;
		width: 100%;
		height: 80rpx;
		border-radius: 100px;
		line-height: 80rpx;
	}





	.actionBtn {
		width: 138rpx;
		height: 56rpx;
		border-radius: 30rpx;
		border: 1px solid #c0c0c0;
		display: flex;
		align-items: center;
		justify-content: center;
		font-size: 24rpx;
		font-family: PingFangSC-Regular, PingFang SC;
		font-weight: 400;
		color: #666666;
		margin-left: 24rpx;
		flex-shrink: 0;
		float: right;
		// position: absolute;
	}

	.actionBtn {
		position: relative;
	}
</style>fs